<route>
{
  "meta":{
    "title": "系统变量",
    "showMenu" :true,
    "serialNum": 50,
    "localism": "sys.system_variable"
  }
}
</route>
<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.varName"
          :placeholder="$t('sys.enter_variable_name')"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData(1)">{{$t('sys.query')}}</el-button>
      </el-col>
    </el-row>
    <el-row v-if="VUE_APP_USER !== 'APP'" :gutter="12">
      <el-col class="mt10">
        <el-button type="primary" @click="handleCreate">{{$t('sys.new')}}</el-button>
      </el-col>
    </el-row>

    <el-table
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column
        :fixed="fixed"
        prop="varName"
        :label="$t('sys.variable_name')"
        width="200"
      />
      <el-table-column
        min-width="240"
        v-for="item in columnData"
        :label="item.name"
        :key="item.key"
        :prop="item.varValue"
      >
        <template slot-scope="scope">
          <span>{{ getEnvValue(scope.row, item.key) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :fixed="fixed ? 'right' : false"
        prop="notes"
        :label="$t('sys.remarks')"
        width="350"
      />
      <el-table-column
        v-if="VUE_APP_USER !== 'APP'"
        :fixed="fixed ? 'right' : false"
        prop="actionsLog"
        :label="$t('sys.operation')"
        width="150"
      >
        <template slot-scope="scope">
          <template>
            <span class="table-actionItem"
              ><el-button type="text" @click="handleEdit(scope.row)"
                >{{$t('sys.edit')}}</el-button
              ></span
            >
            <span class="table-actionItem">
              <el-popconfirm
                :title="$t('sys.confirm_to_delete_ENV')"
                placement="top"
                @confirm="handleDelete(scope.row)"
              >
                <el-button class="link-danger" type="text" slot="reference"
                  >{{$t('sys.delete')}}</el-button
                >
              </el-popconfirm>
            </span>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>
    <SystemForm ref="SystemForm" @ok="loadData()" />
  </div>
</template>

<script>
import SystemForm from "./__components__/SystemForm";

import { getHmenvironmentList } from '@/apis/paas/HmEnvironmentController.js'
import { deleteHmsystemvariable,getHmsystemvariablePageList } from '@/apis/paas/HmSystemVariableController.js'
export default {
  name: "System",
  components: { SystemForm },
  data() {
    return {
      formInline: {},
      VUE_APP_USER: process.env.VUE_APP_USER,
      loading: false,
      queryData: {},
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      columnData: [],
      tableData: [],
      total: 0,
      systemVariableValues: [],
      fixed: false,
    };
  },

  created() {
    this.loadData();
  },
  methods: {
    loadData(pageNo = this.pageData.pageNo) {
      this.loading = true;
      getHmsystemvariablePageList({
        ...this.queryData,
        ...this.pageData,
        pageNo,
      })
        .then((res) => {
          if (res.data.length === 0 && pageNo > 1) {
            this.loadData(pageNo - 1);
            return;
          }
          this.tableData = res.data;
          this.total = res.totalCount;
          this.pageData = {
            pageSize: res.pageSize,
            pageNo: res.pageNo,
          };
        })
        .finally(() => {
          this.loading = false;
        });
      getHmenvironmentList()
        .then((res) => {
          const colmnData = [];
          for (let i = 0; i < res.length; i++) {
            const d = res[i];
            if (d.hidden !== 1) {
              colmnData.push(d);
            }
          }
          this.columnData = colmnData;
          // console.log(this.columnData)
          // console.log(res)
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getEnvValue(record, env) {
      const systemVariableValues = record.systemVariableValues || [];
      if (systemVariableValues.length > 1) {
        this.fixed = true;
      }
      const res = systemVariableValues.find((item) => {
        return item.envKey === env;
      });
      if (res) {
        return res.varValue;
      } else {
        return "";
      }
    },
    handleCreate() {
      this.$refs.SystemForm.addForm();
    },

    handleEdit(record) {
      this.$refs.SystemForm.editForm({
        ...record,
      });
    },

    handleDelete(record) {
      deleteHmsystemvariable([record.varKey]).then((res) => {
        this.loadData();
        this.$message.success(this.$t("sys.operation_success"));
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
